/* eslin-disable */
<template>
  <div class>
    <!-- <logo v-if="sidebarLogo" :collapse="isCollapse" /> -->
    <el-menu
      class="el-menu-vertical-demo"
      unique-opened
      :default-active="active"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      :collapse="isCollapse"
      background-color="#304156"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <template v-for="item in menuList">
        <!-- <menu-tree :list="item"></menu-tree> -->
        <el-submenu :index="item.functionName" v-if="item.children && item.children.length!==0">
          <template slot="title">
            <i :class="item.menuStyle"></i>
            <span slot="title">{{item.functionName}}</span>
          </template>
          <menu-tree :list="i" v-for="i in item.children" :key="i.id"></menu-tree>
        </el-submenu>
        <router-link :to="item.functionUrl||'#'" v-else>
          <el-menu-item :index="item.functionName">
            <!-- <i :class="item.menuStyle"></i> -->
            <span slot="title">{{item.functionName}}</span>
          </el-menu-item>
        </router-link>
      </template>
    </el-menu>
  </div>
</template>

<style lang="scss" scoped>
.logo {
  cursor: pointer;
  padding: 10px;
  text-align: center;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  /* min-height: 400px; */
}

/deep/.el-menu {
  border-right: none;
  a {
    text-decoration: none;
  }
}
</style>

<script>
import { getFunctionListByUserId } from "@/functions/menuList";
import menuTree from "./components/menuTree";
import Logo from "./components/Logo";
export default {
  name: "silder",
  components: {
    menuTree,
    Logo
  },
  data() {
    return {
      menuList: [],
      treeList: []
    };
  },
  computed: {
    isCollapse: function() {
      return this.$store.state.init.isCollapse;
    },
    sidebarLogo: {
      get() {
        return this.$store.state.settings.sidebarLogo
      },
    },
    active: {
      get() {
        return this.$route.meta.title
      },
    }
  },
  methods: {
    gotoIndex() {
      this.$router.push("/");
    },
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {},
    handleSelect(key, keyPath) {
    },
    getTreeData(v) {
      v.forEach(item => {
        if (item.parentId == 0) {
          item.icon = "el-icon-menu";
          if (!item.functionUrl || item.functionUrl == "#") {
            item.children = [];
          }
          this.treeList.push(item);
        }
      });

      this.deepTree(this.treeList);
    },
    deepTree(v) {
      this.menuList.forEach(item => {
        v.forEach(index => {
          if (item.parentId == index.id) {
            index.children.push(item);
            if (!item.functionUrl || item.functionUrl == "#") {
              this.deepTree(index.children);
            }
          }
        });
      });
    }
  },
  mounted() {
    let user = sessionStorage.getItem("user")
    let userId = JSON.parse(user).userId
    getFunctionListByUserId({userId}).then(res => {
      if (res.retHead.code == "0000000") {
        this.menuList = res.retBody;
      }
    });
  }
};
</script>